<template>
	<view class="real-page">
		<u-navbar :autoBack="true" title="实名认证" :placeholder="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="content">
			<view class="head">
				<view class="head-left">
					<view class="head-title">
						实名认证
					</view>
					<view class="head-text">
						更加真实，安全保障
					</view>
				</view>
				<image src="https://m.lqvvvv.com/assets/static/my/real-icon.png" mode=""></image>
			</view>
			<view class="info-box" v-if="info.face_status == 0">
				<view class="info-title">
					请输入身份证信息
				</view>
				<view class="info-item">
					<u--input placeholder="姓名" maxlength="5" border="none" v-model="name" type="text"></u--input>
				</view>
				<view class="info-item">
					<u--input placeholder="证件号码" maxlength="18" border="none" v-model="num"></u--input>
				</view>
				<view class="next-btn">
					<u-button size="large" @click="goheyan" shape="circle"
						color="linear-gradient( 90deg, #C58AF0 0%, #6272ED 100%)" type="primary" text="人脸核验"></u-button>
				</view>
			</view>
			<u-button v-if="info.face_status == 1" size="large" style="margin-top: 50rpx;" shape="circle"
				color="linear-gradient( 90deg, #C58AF0 0%, #6272ED 100%)" type="primary" text="已实名"></u-button>
		</view>
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js";
	import {
		pathToBase64
	} from '../../../common/imageTools.js';
	export default {
		data() {
			return {
				name: '',
				num: '',
				upload_status: 1,
				info: {}
			}
		},
		onLoad() {
			this.getuserinfo()
		},
		methods: {
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.info = res.data
					} else {
						this.info = {}
					}
				})
			},
			async goheyan() {
				if (this.name == '') {
					uni.showToast({
						title: '请填写您的姓名！',
						icon: 'none'
					})
					return
				}
				if (this.num == '') {
					uni.showToast({
						title: '请填写您的证件号码！',
						icon: 'none'
					})
					return
				}
				let app = this
				// #ifdef APP
				let result = await permision.requestAndroidPermission('android.permission.CAMERA')
				if (result == 1) {
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['camera', 'album'], //这要注意，camera调拍照，album是打开手机相册
						success: (res) => {
							const tempFilePaths = res.tempFilePaths[0];
							pathToBase64(tempFilePaths)
								.then(base64 => {
									uni.showLoading({
										mask: true,
										title: '核验中...'
									})
									let params = {
										Name: app.name,
										IdCard: app.num,
										ImageBase64: base64
									}
									app.$Request({
										method: 'POST',
										url: '/api/user/faceCheck',
										data: params,
										ismsg: true,
									}).then(res => {
										uni.hideLoading()
										if (res.code == 1) {
											app.getuserinfo()
										}
									})
								})
								.catch(error => {
									console.error("转换失败==>", error)
								})
						}
					});
				} else if (result == 0) {
					uni.showToast({
						title: '请您授权相机权限!方便进行人脸识别!',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '请您打开相机权限！',
						icon: 'none'
					})
					setTimeout(() => {
						permision.gotoAppPermissionSetting()
					}, 1000)
				}
				// #endif
				// #ifdef H5
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera调拍照，album是打开手机相册
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						pathToBase64(tempFilePaths)
							.then(base64 => {
								uni.showLoading({
									mask: true,
									title: '核验中...'
								})
								let params = {
									Name: app.name,
									IdCard: app.num,
									ImageBase64: base64
								}
								app.$Request({
									method: 'POST',
									url: '/api/user/faceCheck',
									data: params,
									ismsg: true,
								}).then(res => {
									uni.hideLoading()
									if (res.code == 1) {
										app.getuserinfo()
									}
								})
							})
							.catch(error => {
								console.error("转换失败==>", error)
							})
					}
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera调拍照，album是打开手机相册
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						pathToBase64(tempFilePaths)
							.then(base64 => {
								uni.showLoading({
									mask: true,
									title: '核验中...'
								})
								let params = {
									Name: app.name,
									IdCard: app.num,
									ImageBase64: base64
								}
								app.$Request({
									method: 'POST',
									url: '/api/user/faceCheck',
									data: params,
									ismsg: true,
								}).then(res => {
									uni.hideLoading()
									if (res.code == 1) {
										app.getuserinfo()
									}
								})
							})
							.catch(error => {
								console.error("转换失败==>", error)
							})
					}
				});
				// #endif
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.real-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;

		.content {
			padding: 0 30rpx;

			.head {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.head-left {
					color: #2E314A;

					.head-title {
						font-size: 48rpx;
						font-weight: bold;
					}

					.head-text {
						margin-top: 30rpx;
						font-size: 32rpx;
					}
				}

				image {
					width: 304rpx;
					height: 329rpx;
				}
			}

			.info-box {
				padding: 30rpx;
				border-radius: 30rpx;
				background-color: #fff;

				.info-title {
					color: #000;
					font-size: 32rpx;
					font-weight: bold;
					padding: 20rpx 0;
				}

				.info-item {
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #F6F7F9;
					margin-top: 30rpx;
				}

				.next-btn {
					margin-top: 50rpx;
				}

				.upload-item {
					border-radius: 10rpx;
					background-color: #F3F4F7;
					padding: 30rpx 15rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					.upload-left {
						color: #000000;
						margin-left: 20rpx;

						.upload-title {
							font-size: 32rpx;
							font-weight: bold;
						}

						.upload-text {
							font-size: 24rpx;
							margin-top: 15rpx;
						}
					}

					image {
						width: 351rpx;
						height: 233rpx;
					}
				}
			}
		}
	}
</style>